'use strict';
import React, { Component } from "react";
//import React from 'react';
import {
  AppRegistry,
  StyleSheet,
    Dimensions,
  Text,
  Image,

   TouchableOpacity,
  View
} from 'react-native';
import CodePush from 'react-native-code-push'

class CodePushDemoApp extends Component{

    constructor(){
        super();
        this.state = {restartAllowed: true };
    }

    codePushStatusDidChange(syncStatus){
        switch(syncStatus){
            case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
                this.setState({syncMessage: "checking for update."});
                break;
            case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
                   this.setState({ syncMessage: "Downloading package." });
                   break;
            case CodePush.SyncStatus.AWAITING_USER_ACTION:
                   this.setState({ syncMessage: "Awaiting user action." });
                   break;
            case CodePush.SyncStatus.INSTALLING_UPDATE:
                   this.setState({ syncMessage: "Installing update." });
                   break;
            case CodePush.SyncStatus.UP_TO_DATE:
                   this.setState({ syncMessage: "App up to date.", progress: false });
                   break;
            case CodePush.SyncStatus.UPDATE_IGNORED:
                   this.setState({ syncMessage: "Update cancelled by user.", progress: false });
                   break;
            case CodePush.SyncStatus.UPDATE_INSTALLED:
                   this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
                   break;
            case CodePush.SyncStatus.UNKNOWN_ERROR:
                   this.setState({ syncMessage: "An unknown error occurred.", progress: false });
                   break;

        }
    }

      codePushDownloadDidProgress(progress) {
        this.setState({ progress });
      }


  toggleAllowRestart() {
    this.state.restartAllowed
      ? CodePush.disallowRestart()
      : CodePush.allowRestart();

    this.setState({ restartAllowed: !this.state.restartAllowed });
  }

  getUpdateMetadata() {
    CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
      .then((metadata: LocalPackage) => {
        this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
      }, (error: any) => {
        this.setState({ syncMessage: "Error: " + error, progress: false });
      });
  }

  /** Update is downloaded silently, and applied on restart (recommended) */
  sync() {
    CodePush.sync(
      {},
      this.codePushStatusDidChange.bind(this),
      this.codePushDownloadDidProgress.bind(this)
    );
  }

  /** Update pops a confirmation dialog, and then immediately reboots the app */
  syncImmediate() {
    CodePush.sync(
      { installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
      this.codePushStatusDidChange.bind(this),
      this.codePushDownloadDidProgress.bind(this)
    );
  }

    render() {
      let progressView;

      if (this.state.progress) {
        progressView = (
          <Text style={styles.messages}>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
        );
      }

          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to CodePush!
              </Text>
              <TouchableOpacity onPress={this.sync.bind(this)}>
                <Text style={styles.syncButton}>Press for background sync</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.syncImmediate.bind(this)}>
                <Text style={styles.syncButton}>Press for dialog-driven sync</Text>
              </TouchableOpacity>
              {progressView}
              <Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.png")}/>
              <TouchableOpacity onPress={this.toggleAllowRestart.bind(this)}>
                <Text style={styles.restartToggleButton}>Restart { this.state.restartAllowed ? "allowed" : "forbidden"}</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.getUpdateMetadata.bind(this)}>
                <Text style={styles.syncButton}>Press for Update Metadata</Text>
              </TouchableOpacity>
              <Text style={styles.messages}>{this.state.syncMessage || ""}</Text>
            </View>
          );

      }

//    async sync(){
//
//       let self = this;
//
//       try{
//            return await CodePush.sync(
//            {
//                installMode: CodePush.InstallMode.IMMEDIATE,
//            },
//            (syncStatus) => {
//
//
//            }
//
//            )
//       }
//    }

}

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  image:{
    margin: 30,
    width: Dimensions.get("window").width - 100,
    height: 365*(Dimensions.get('window').width - 100) / 651
  },
  message:{
    marginTop: 30,
    textAlign: "center"
  },
  restartToggleButton:{
    color: "blue",
    fontSize: 17
  },
  syncButton:{
    color: "green",
    fontSize: 25
  },
  welcome:{
    fontSize: 20,
    textAlign: "center",
    margin: 20
  }

});

let codePushOptions  = {checkFrequery: CodePush.CheckFrequency.MANUAL};
CodePushDemoApp = CodePush(codePushOptions)(CodePushDemoApp);
AppRegistry.registerComponent('CodePushDemoApp', () => CodePushDemoApp);